<template>
  <view class="detail-page">
    <!-- 轮播图区域 -->
	<!-- 轮播图区域 - 改为手动滑动并显示页码 -->
	<view class="swiper-container">
		<u-swiper 
		  :list="imageList" 
		  :autoplay="false" 
		  :interval="3000" 
		  :circular="true"
		  indicator-color="#fff" 
		  indicator-active-color="#007aff"
		  @change="handleSwiperChange"
		  key-name="url"
		></u-swiper>
		<view class="swiper-pagination" v-if="tempImageCount > 0">
		  {{ currentIndex + 1 }}/{{ tempImageCount }}
		</view>
	</view>
    <!-- 其他详情信息展示区域（可根据需求补充） -->
    <view class="car-info">
		<view class="price-wrapper">
			  <view class="car-price">
				<text>{{ carDetail.price/ 10000 }} 万</text>
			  </view>
			  <view class="newcar-price">
				<text>新车含税价:</text>
				<text v-if="carDetail.newPrice">{{ carDetail.newPrice / 10000 }} 万</text>
				<text v-else>暂无报价</text>
			  </view>
		</view>
		<view class="inner-content">
			  <view class="car-name">{{ carDetail.licenseDate.substring(0,4) }}款{{ carDetail.brandName }}</view>
			  <view class="dealership">
				  <text>发布车商:</text>
				  <text>{{ carDetail.nickName}}</text>
			  </view>
			  <view class="car-params">
				<view class="params-row">
				  <view class="param-item label first-item" style="font-size: 15px;">档案</view>
				  <view class="param-item value other-item">{{ carDetail.licenseDate.substring(0,7) }}</view>
				  <view class="param-item value mileage-item">{{ carDetail.mileage }}万公里</view>
				  <view class="param-item value other-item">{{ carDetail.licenseLocation }}</view>
				  <view class="param-item value other-item">{{ getEmissionStandard(carDetail.licenseDate) }}</view>
				</view>
				<view class="params-row">
				  <view class="param-item label first-item"></view>
				  <view class="param-item label other-item">上牌时间</view>
				  <view class="param-item label mileage-item">表显里程</view>
				  <view class="param-item label other-item">车源地</view>
				  <view class="param-item label other-item">排放标准</view>
				</view>
			  </view>
			  <view class="car-params">
					<view class="params-row">
					  <view class="param-item label first-item" style="font-size: 15px;">参数</view>
					  <view class="param-item value other-item1">{{ carDetail.ownerCount }}次</view>
					  <view class="param-item value other-item1">{{ carDetail.displacement }}</view>
					  <view class="param-item value other-item1">{{ carDetail.gearboxType }}</view>
					  <view class="param-item value other-item1">{{ carDetail.warrantyStatus }}</view>
					</view>
					<view class="params-row">
					  <view class="param-item label first-item"></view>
					  <view class="param-item label other-item1">过户次数</view>
					  <view class="param-item label other-item1">发动机</view>
					  <view class="param-item label other-item1">变速箱</view>
					  <view class="param-item label other-item1">质保状态</view>
					</view>
			  </view>
			  <view class="car-config">
			    <view class="config-title">优势分析：</view>
			    <scroll-view class="config-scroll" scroll-x="true" show-scrollbar="false">
			      <view class="config-item" v-for="(config, index) in configNames" :key="index">
			        {{ config }}
			      </view>
			    </scroll-view>
			  </view>
		</view>
    </view>
  </view>
</template>

<script>
import { getUsedCarDetail } from '@/api/usedcar/usedcar.js'; // 假设获取单条详情的接口方法

export default {
  data() {
    return {
      carIdVal: '', // 接收的二手车ID
      carDetail: {
		  brandName: '',
		  licenseDate: '',
		  mileage: '',
		  price: '',
		  newPrice: '',
		  carSource: '',
		  emissionStandard: '',
		  acceleration: '',
		  engine: '',
		  wheelbase: '',
		  gearbox: '',
		  configNames: []
		},
      imageList: [], // 轮播图图片地址列表
	  currentIndex: 0,
	  imageCount: 0,
	  tempImageCount: 0,
	  configNames: []
    };
  },
  computed: {
    pageInfo() {
      return `${this.currentIndex + 1}/${this.imageCount}`;
    }
  },
  onLoad(options) {
    // 接收从列表页传递过来的二手车ID
    this.carIdVal = options.carId;
    // 调用方法获取二手车详情
    this.getCarDetail();
  },
  methods: {
    async getCarDetail() {
      try {
        const res = await getUsedCarDetail(this.carIdVal); // 调用获取单条详情的接口
        if (res.code === 200) {
          this.carDetail = res.data;
		  this.configNames = this.carDetail.configNames || []; 
          // 处理image字段，分割成数组用于轮播图
          if (this.carDetail.image) {
            this.imageList = this.carDetail.image.split(',').filter(img => img.trim() !== '').map(img => ({ url: img }));
			this.tempImageCount = this.imageList.length;
          }else{
			  this.imageList = []; 
			  this.tempImageCount = 0;
		  }
        } else {
          this.$u.toast('获取详情失败');
        }
      } catch (err) {
        this.$u.toast('网络错误');
      }
    },
	handleSwiperChange(event) {
	  this.currentIndex = event.current;
	  this.$nextTick(() => {
	  });
	},
	getEmissionStandard(licenseDate) {
	    const year = licenseDate ? new Date(licenseDate).getFullYear() : null;
	    if (!year) return "未知";
	    if (year < 2011) return "国三及以下";
	    if (year < 2017) return "国四";
	    return "国五及以上";
	}
  }
};
</script>

<style scoped>
.detail-page {
  padding: 16rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}
/* 轮播图容器 - 用于定位页码 */
.swiper-container {
  position: relative;
  height: 240rpx;
  margin-bottom: 20rpx;
}

/* 轮播图样式 */
.u-swiper {
  height: 50%;
}
/* 页码指示器样式 */
.swiper-pagination {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24rpx;
  padding: 3rpx 10rpx;
  border-radius: 15rpx;
  z-index: 10;
}
.car-info {
  background-color: #fff;
  padding: 0;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
/* 新增.price-wrapper样式，设置背景色和内边距 */
.price-wrapper {
  background-color: #fff8f0; 
  padding: 15rpx 20rpx;
}
/* 新增.inner-content样式，设置内边距 */
.inner-content {
  padding: 20rpx;
}
.car-name {
  font-size: 35rpx;
  font-weight: bold;
  color: hotpink;
  margin-top: 10rpx;
}
.car-meta {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.car-price {
  font-size: 44rpx;
  color: orangered;
  margin-top: 10rpx;
}
.newcar-price {
  font-size: 24rpx;
  color: lightslategray;
  margin-top: 2rpx;
}
.car-params {
  margin-top: 20rpx;
}
.params-row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 0rpx solid #eee;
  padding: 10rpx 0;
}
.param-item {
  box-sizing: border-box;
}
.first-item {
  width: 12%; 
}
.mileage-item {
  width: 27%; 
}
.other-item {
  width: 19%; 
}
.other-item1 {
  width: 22%; 
}
.param-item.label {
  color: darkgray;
  font-size: 12px;
}
.param-item.value {
  color: darkslategray;
  font-size: 14px;
}
.dealership {
  margin-top: 5px;
  display: flex;
  align-items: center;
  color: darkcyan;
}
.car-config {
  margin-top: 20rpx;
}
.config-title {
  font-size: 24rpx;
  color: orange;
  margin-bottom: 10rpx;
}
.config-scroll {
  white-space: nowrap; 
  padding-bottom: 10rpx; 
}
.config-item {
  display: inline-block; 
  padding: 8rpx 16rpx;
  margin-right: 12rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #666;
}
</style>